<template>
    <div class="accounting">
        <div class="nav-bar" :style="{ top: AppNavShow ? '3.5rem' : 0 }">
            <nuxt-link to="/" class="left">
                <van-icon name="arrow-left" color="#000000" size="1.5rem" />
            </nuxt-link>
            <div class="centent">小竹资讯</div>
            <div class="right"></div>
        </div>

        <div
            class="tabs"
            :style="{
                top: AppNavShow ? '6.25rem' : '3.5rem',
            }"
        >
            <van-tabs
                v-model="tabsIndex"
                title-active-color="#333333"
                background="transparent"
                color="#4291FF"
                line-width="1.25rem"
            >
                <van-tab
                    v-for="(item, index) in tabsList"
                    :key="index"
                    :title="item.name"
                    :to="`/information/${item.pathName}/1`"
                ></van-tab>
            </van-tabs>
        </div>

        <div class="data-list">
            <nuxt-link
                v-for="(item, index) in dataList"
                :key="index"
                class="data-item"
                :to="`/information/${item.id}.html`"
            >
                <div class="info">
                    <div class="title">{{ item.title }}</div>
                    <div class="date">{{ item.push_date }}</div>
                </div>
                <img :alt="item.title" v-lazy="item.pic" />
            </nuxt-link>
        </div>
        <div class="page">
            <van-pagination
                v-model="page"
                :total-items="total"
                :show-page-size="3"
                :items-per-page="pageSize"
                force-ellipses
                @change="changePage"
            />
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { getanalysedata } from "@/assets/api/indexApi";
import { goTop, getArr_objKey, goTopSmooth } from "@/assets/utils/utils.js";
import {
    getImformationCate,
    getImformationList,
    getHotImformationList,
    getReadingList,
} from "@/assets/api/InformationApi.js";
export default {
    components: {},
    async asyncData({ params }) {
        let data = {
            tabsList: [
                {
                    id: 0,
                    name: "热门资讯",
                    pathName: "rmzx",
                    weigh: 0,
                },
                {
                    id: 3,
                    name: "财政资讯",
                    pathName: "czzx",
                    weigh: 10,
                },
                {
                    id: 1,
                    name: "考试资讯",
                    pathName: "kszx",
                    weigh: 9,
                },
                {
                    id: 2,
                    name: "税局稽查",
                    pathName: "sjjc",
                    weigh: 8,
                },
                {
                    id: 4,
                    name: "财税分享",
                    pathName: "ggwz",
                    weigh: 0,
                },
            ],
            tabsIndex: 0,
            total: 0,
            dataList: [],
            page: 1,
            pageSize: 20,
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/information/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };

        data.tabsIndex = getArr_objKey(data.tabsList, params.type, "pathName");
        data.page = parseInt(params.page.replace(".html", ""));
        data.jsonld["@id"] += params.type + "/" + params.page;

        if (data.tabsIndex == 0) {
            var res = await getHotImformationList({
                page: data.page,
                pageSize: data.pageSize,
            });
        } else {
            var res = await getImformationList({
                tid: data.tabsList[data.tabsIndex].id,
                page: data.page,
                pageSize: data.pageSize,
            });
        }

        if (res.code == 1) {
            if (res.data.length > 0) {
                data.total = res.data[0].datacount;
                data.jsonld.pubDate = data.jsonld.upDate =
                    res.data[0].push_date;
            } else data.total = 0;
            data.dataList = res.data;
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.metaDescription,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.metaKeywords,
                },
            ],
        };
    },
    data() {
        return {
            active: 0,

            metaTitle: "小竹财税资讯",
            metaKeywords: "小竹财税资讯",
            metaDescription:
                "小竹财税资讯汇集众多财税资讯、财税新闻等，实时更新财税信息，为企业财税及财税从业者提供专业的财税信息资讯。",
        };
    },
    created() {
        this.getMetaInfo();
        this.jsonld.title = this.metaTitle + "-【小竹财税平台】";
        this.jsonld.description = this.metaDescription;
    },
    mounted() {
        console.log(this.dataList);
        getanalysedata({
            m_id: 7,
            type: 1,
            code: this.MetaCode,
            describe: this.describe,
        });
        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    computed: {
        ...mapState("common", {
            AppNavShow: (state) => state.AppNavShow,
        }),
    },
    methods: {
        // 切换分页
        changePage(page) {
            this.$router.push({
                path: `/information/${this.$route.params.type}/${page}`,
            });
        },
        getMetaInfo() {
            this.MetaCode = "PJ1";
            if (this.$route.params.type == "rmzx") {
                this.metaTitle = "小竹财税资讯";
                this.metaKeywords = "小竹财税资讯";
                this.metaDescription =
                    "小竹财税资讯汇集众多财税资讯、财税新闻等，实时更新财税信息，为企业财税及财税从业者提供专业的财税信息资讯。";
                this.MetaCode = "PJ1";
                this.describe = "热门资讯";
            } else if (this.$route.params.type == "czzx") {
                this.metaTitle = "财政资讯";
                this.metaKeywords = "财政资讯";
                this.metaDescription =
                    "小竹财税资讯汇集众多财税资讯、财政新闻、财政政策解读等，实时更新财政资讯信息，为企业财税及财税从业者提供专业的财政信息资讯。";
                this.MetaCode = "PJ2";
                this.describe = "财政资讯";
            } else if (this.$route.params.type == "kszx") {
                this.metaTitle = "会计考试资讯";
                this.metaKeywords = "会计考试资讯";
                this.metaDescription =
                    "小竹财税资讯汇集众会计考试资讯、财务考试政策、会计考试条件，实时更新会计考试信息，为企业财税及财税从业者提供专业的会计考试内容资讯。";
                this.MetaCode = "PJ3";
                this.describe = "考试资讯";
            } else if (this.$route.params.type == "sjjc") {
                this.metaTitle = "税局稽查新闻";
                this.metaKeywords = "税局稽查新闻";
                this.metaDescription =
                    "小竹财税资讯汇集众税局稽查资讯、税局稽查新闻等，实时更税局稽查信息，为企业财税及财税从业者提供专业的税局稽查新闻资讯";
                this.MetaCode = "PJ4";
                this.describe = "税局稽查";
            } else if (this.$route.params.type == "ggwz") {
                this.metaTitle = "税务资讯";
                this.metaKeywords = "税务资讯";
                this.metaDescription =
                    "小竹财税资讯汇集众多税务资讯、税务政策解读、税务新闻等，实时更新税务信息，为企业税务提供专业的财税信息资讯。";
                this.MetaCode = "PJ5";
                this.describe = "财税分享";
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.accounting {
}
.nav-bar {
    width: 100%;
    position: sticky;
    background-color: #f7f7f7;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 2.75rem;
    .left,
    .right {
        width: 15%;
    }

    .centent {
        font-weight: 600;
        font-size: 1.31rem;
        color: #333333;
    }
}

.tabs {
    border-bottom: 1px solid #eaeaea;
    position: sticky;
    background-color: #ffffff;
}

.data-list {
}
.data-item {
    display: block;
    width: 92%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0;
    .info {
        .title {
            font-size: 1.1rem;
            font-weight: 500;
            color: #333333;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 控制显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .date {
            font-weight: 350;
            font-size: 0.75rem;
            margin-top: 0.6rem;
            color: #999999;
        }
    }
    img {
        width: 7.59rem;
        min-width: 7.59rem;
        height: 5.25rem;
        border-radius: 0.3rem;
        margin-left: 0.8rem;
    }
}

.page {
    width: 92%;
    margin: 0 auto;
    padding: 1rem 0;
}
</style>
